<template>
    <div class="main">
        <el-card class="box-card">
            <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="商家名称">
                    <el-input v-model="page.storeName" placeholder="请输入商家名称" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="page.state" placeholder="请选择">
                        <el-option label="待审核" value="0" />
                        <el-option label="待打款" value="1" />
                        <el-option label="已打款" value="2" />
                        <el-option label="已驳回" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                    <el-button type="primary" @click="reset">导出列表</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" max-height="600px">
                <el-table-column type="index" width="55" />
                <el-table-column prop="storeName" label="名称" align="center" />
                <el-table-column prop="userName" label="用户" align="center">
                </el-table-column>
                <el-table-column prop="cashWay" label="体现方式" align="center" />
                <el-table-column prop="cashInfo" label="体现信息" align="center" />
                <el-table-column prop="applicationAmount" label="申请金额" align="center" />
                <el-table-column prop="amountReceived" label="到账金额" align="center" />
                <el-table-column prop="clerkNum" label="状态" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.state == 0" type="info">待审核</el-tag>
                        <el-tag v-if="scope.row.state == 1" type="success">待打款</el-tag>
                        <el-tag v-if="scope.row.state == 2" type="success">已打款</el-tag>
                        <el-tag v-if="scope.row.state == 3" type="danger">已驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="applicationTime" label="申请时间" align="center" />
                <!-- <el-table-column fixed="right" label="操作" width="260">
                    <template #default="scope">
                        <el-button v-if="scope.row.state == 0 || scope.row.state == 1" link type="plain" size="small"
                            @click="modify(scope.row)">修改金额</el-button>
                        <el-button v-if="scope.row.state == 1" link type="primary" size="small"
                            @click="operate(scope.row, 0)">打款</el-button>
                        <el-button v-if="scope.row.state == 0" link type="success" size="small"
                            @click="operate(scope.row, 4)">通过</el-button>
                        <el-button v-if="scope.row.state == 1" link type="success" size="small"
                            @click="operate(scope.row, 1)">已打款</el-button>
                        <el-button v-if="scope.row.state == 1 || scope.row.state == 3" link type="danger" size="small"
                            @click="operate(scope.row, 2)">返回审核</el-button>
                        <el-button v-if="scope.row.state == 0" link type="danger" size="small"
                            @click="operate(scope.row, 3)">拒绝</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                @currentPageChanged="handleCurrentPageChange" />
        </el-card>
        <el-dialog v-model="dialogVisiblemodify" title="修改金额" width="30%" :before-close="handleClose">
            <div>
                <el-input v-model="amountReceived" placeholder="请输入" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisiblemodify = false">取消</el-button>
                    <el-button type="primary" @click="modifyOK">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { BalanceApplication, BalanceApplicationUpdateStatus, BalanceApplicationUpdateCash } from '@/api/merchantManagement.js'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
import { ElMessage, ElMessageBox } from 'element-plus'

const page = reactive({
    storeName: "",
    state: "",
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = reactive([])
const dialogVisiblemodify = ref(false)
const amountReceived = ref('')
const rowData = reactive({
    row: {}
})
// 搜索
const onSubmit = () => {
    getList()
}
// 重置
const reset = () => {
    page.storeName = "";
    page.state = "";
    page.pageNum = 1;
    page.pageSize = 10;
    getList()
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getList()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    getList()
}
// 修改金额
const modify = (scope) => {
    dialogVisiblemodify.value = true
    rowData.row = scope
    amountReceived.value = rowData.row.amountReceived
}
// 修改金额确认
const modifyOK = () => {
    BalanceApplicationUpdateCash({ id: rowData.row.id, amountReceived: amountReceived.value }).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            getList()
            dialogVisiblemodify.value = false
        }
    })
}


// 已打款
const operate = (scope, num) => {
    let src = ''
    if (num == 1) {
        src = '是否确认该条数据已打款?'
    } else if (num == 2) {
        src = '是否确认该条数据返回审核?'
    }
    else if (num == 3) {
        src = '是否驳回该条数据?'
    } else if (num == 4) {
        src = '是否通过该条数据?'
    }
    ElMessageBox.confirm(
        src,
        '确认',
        {
            confirmButtonText: 'OK',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            let par = {}
            if (num == 1) {
                par = {
                    id: scope.id,
                    state: '2'
                }
            } else if (num == 2) {
                par = {
                    id: scope.id,
                    state: '0'
                }
            } else if (num == 3) {
                par = {
                    id: scope.id,
                    state: '3'
                }
            } else if (num == 4) {
                par = {
                    id: scope.id,
                    state: '1'
                }
            }
            BalanceApplicationUpdateStatus(par).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '操作成功',
                    })
                    getList()
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}


// 获取列表
const getList = () => {
    tableData.length = 0;
    total.value = 0
    BalanceApplication(page).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data.records)
            total.value = res.data.total
        }
    })
}




onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped>
.box-card ::v-deep .el-select__wrapper {
    width: 100px;
}

.main {
    padding: 0 5px 5px 5px;
}
</style>